<template>
	<view>
		<view style="padding-bottom: 200upx;">
			<!-- 列表 -->
			<view v-for="(item, index) of swipelist" :key="index" class="box">
				<swipe-action :options="options" :index="index" @button="onButton">
					<view class="item" @click="dateils(item)">
						<view class="left">
							<view class="one"><text class="btn" v-if="index ==0">默认</text> {{item.address}}</view>
							<view class="two">{{item.detailde}}</view>
							<view class="therr">
								<text>{{item.name}}</text>
								<text>{{item.tel}}</text>
							</view>
						</view>
						<view class="right"><text class="demofont">&#xeb5c;</text></view>
					</view>
				</swipe-action>
			</view>
			<!-- 底部按钮 -->
			<view class="bottom-div su-border2">
				<button type="primary" class="su-button" @click="dateils()">新增收货地址</button>
			</view>
		</view>
	</view>
</template>
<script>
	import swipeAction from '@/components/su-swipe-action';
	export default {
		components: {
			swipeAction
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				swipelist: [{
					address: "云南省昆明市五华区",
					detailde: "活力空间（云南省昆明市五华区高新区滇缅大道）a座307",
					name: "五六七0",
					tel: "1324567854"
				}, {
					address: "云南省昆明市五华区",
					detailde: "活力空间（昆明市五华区滇缅大道）a座307",
					name: "梅十三0",
					tel: "1322457854"
				},{
					address: "云南省昆明市五华区",
					detailde: "活力空间（云南省昆明市五华区高新区滇缅大道）a座307",
					name: "五六七1",
					tel: "1324567854"
				}, {
					address: "云南省昆明市五华区",
					detailde: "活力空间（昆明市五华区滇缅大道）a座307",
					name: "梅十三1",
					tel: "1322457854"
				},{
					address: "云南省昆明市五华区",
					detailde: "活力空间（云南省昆明市五华区高新区滇缅大道）a座307",
					name: "五六七2",
					tel: "1324567854"
				}, {
					address: "云南省昆明市五华区",
					detailde: "活力空间（昆明市五华区滇缅大道）a座307",
					name: "梅十三2",
					tel: "1322457854"
				}, ]
			}
		},
		methods: {
			//删除
			onButton(e) {
				var that = this
				uni.showModal({
					title: "提示",
					content:"是否删除这条数据",
					success:function(res){
						 if (res.confirm) {
						        console.log('用户点击确定');
								that.swipelist.splice(e, 1)
						    } else if (res.cancel) {
						        console.log('用户点击取消');
						    }
					}
				});
			},
			dateils(item) {
				console.log(item)
				if (item != "" && item != null && item != undefined) {
					uni.navigateTo({
						url: "../detalis/detalis?item=" + JSON.stringify(item)
					})
				} else {
					uni.navigateTo({
						url: "../detalis/detalis"
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $default-back;
	}

	.box {
		width: 750upx;
		background: #fff;
		position: relative;
		.item{
			display: flex;
			align-items: center;
			.left {
				padding: 15upx 40upx;
				padding-right:0upx;
				flex: 1;
				.one {
					display: flex;
					align-items: center;
					color: #636463;
					font-size: 28upx;
					.btn {
						margin-right: 10upx;
						border: 1px solid #007aff;
						color: #007aff;
						font-size: 24upx;
						padding: 0upx 20upx;
						border-radius: 10upx;
					}
				}
			
				.two {
					font-size: 28upx;
					font-weight: 600;
				}
			
				.therr {
					color: #636463;
					text {
						font-size: 28upx;
						margin-right: 20upx;
					}
				}
			}
			
			.right {
				font-size: 24upx;
				position: relative;
				width: 130upx;
				text-align: center;
				text {
					font-size: 45upx;
					color: #999;
				}
			}
		}
		
	}

	.box::after {
		content: "";
		width: 100%;
		height: 2upx !important;
		background: #eee;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.bottom-div::before {
		border-top: 1upx solid #d1d1d1;
	}
	.bottom-div {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding:25upx 30upx;
		background-color: #fff;
	}
</style>
